CSS :has() selektora apgūšana: vecākelementu atlases spēka atraisīšana

Gadiem ilgi CSS izstrādātāji ir ilgojušies pēc vienkārša un efektīva veida, kā atlasīt vecākelementus, pamatojoties uz to bērnu elementiem. Gaidīšana ir beigusies! :has() pseidoklase beidzot ir klāt, un tā revolucionizē veidu, kā mēs rakstām CSS. Šis spēcīgais selektors ļauj jums mērķēt uz vecākelementu, ja tas satur noteiktu bērna elementu, paverot jaunu iespēju pasauli dinamiskam un responsīvam stilam.

Kas ir :has() selektors?

:has() pseidoklase ir CSS relāciju pseidoklase, kas kā argumentu pieņem selektoru sarakstu. Tā atlasa elementu, ja kāds no selektoru sarakstā esošajiem selektoriem atbilst vismaz vienam elementam starp elementa pēcnācējiem. Vienkāršāk sakot, tā pārbauda, vai vecākelementam ir noteikts bērna elements, un, ja ir, tiek atlasīts vecākelements.

Pamata sintakse ir:

vecāks:has(bērns) { /* CSS noteikumi */ }

Šis kods atlasa vecāks elementu tikai tad, ja tas satur vismaz vienu bērns elementu.

Kāpēc :has() ir tik svarīgs?

Tradicionāli CSS spējas atlasīt vecākelementus, pamatojoties uz to bērniem, bija ierobežotas. Šis ierobežojums bieži prasīja sarežģītus JavaScript risinājumus vai apietus ceļus, lai panāktu dinamisku stilu. :has() selektors novērš nepieciešamību pēc šīm apgrūtinošajām metodēm, ļaujot izveidot tīrāku, vieglāk uzturamu un veiktspējīgāku CSS kodu.

Lūk, kāpēc :has() maina spēles noteikumus:

• Vienkāršots stils: Sarežģītus stila noteikumus, kas agrāk prasīja JavaScript, tagad var sasniegt ar tīru CSS.
• Uzlabota uzturēšana: Tīrs un kodolīgs CSS kods ir vieglāk saprotams, atkļūdojams un uzturams.
• Uzlabota veiktspēja: Nativu CSS selektoru izmantošana parasti nodrošina labāku veiktspēju salīdzinājumā ar JavaScript balstītiem risinājumiem.
• Lielāka elastība: :has() selektors nodrošina lielāku elastību, veidojot dinamiskus un responsīvus dizainus.

:has() selektora pamatpiemēri

Sāksim ar dažiem vienkāršiem piemēriem, lai ilustrētu :has() selektora spēku.

1. piemērs: Vecākelementa Div stils, balstoties uz attēla klātbūtni

Pieņemsim, ka vēlaties pievienot apmali <div> elementam tikai tad, ja tas satur <img> elementu:

div:has(img) { border: 2px solid blue; }

Šis CSS noteikums piemēros zilu apmali jebkuram <div>, kas satur vismaz vienu <img> elementu.

2. piemērs: Saraksta elementa stils, balstoties uz Span klātbūtni

Pieņemsim, ka jums ir saraksts, un jūs vēlaties izcelt saraksta elementu, ja tas satur <span> elementu ar noteiktu klasi:

li:has(span.highlight) { background-color: yellow; }

Šis CSS noteikums mainīs fona krāsu uz dzeltenu jebkuram <li>, kas satur <span> ar klasi "highlight".

3. piemērs: Formas iezīmes stils, balstoties uz ievades lauka derīgumu

Jūs varat izmantot :has(), lai stilizētu formas iezīmi, balstoties uz to, vai saistītais ievades lauks ir derīgs vai nederīgs (kombinācijā ar :invalid pseidoklasi):

label:has(+ input:invalid) { color: red; font-weight: bold; }

Šis kods padarīs iezīmi sarkanu un treknrakstā, ja tai uzreiz sekojošais ievades lauks ir nederīgs.

:has() selektora progresīvi pielietojumi

:has() selektors kļūst vēl spēcīgāks, ja to apvieno ar citiem CSS selektoriem un pseidoklasēm. Šeit ir daži progresīvi lietošanas gadījumi:

4. piemērs: Mērķēšana uz elementiem, kuriem nav noteikta satura

Jūs varat izmantot :not() pseidoklasi kopā ar :has(), lai mērķētu uz elementiem, kuriem *nav* noteikta bērna elementa. Piemēram, lai stilizētu divus, kas *nesatur* attēlus:

div:not(:has(img)) { background-color: #f0f0f0; }

Šis kods piemēros gaiši pelēku fonu jebkuram <div>, kas nesatur <img> elementu.

5. piemērs: Sarežģītu izkārtojumu veidošana

:has() selektoru var izmantot, lai izveidotu dinamiskus izkārtojumus, pamatojoties uz konteinera saturu. Piemēram, jūs varat mainīt režģa izkārtojumu, pamatojoties uz noteikta veida elementa klātbūtni režģa šūnā.

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

Šis kods liks režģa elementam aizņemt divas kolonnas, ja tas satur attēlu.

6. piemērs: Dinamisks formu stils

Jūs varat izmantot :has(), lai dinamiski stilizētu formas elementus, pamatojoties uz to stāvokli (piemēram, vai tie ir fokusēti, aizpildīti vai derīgi).

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

Šis kods pievienos zilu ēnu, kad ievades lauks ir fokusēts, zaļu apmali, ja ievade ir derīga, un sarkanu apmali, ja ievade ir nederīga.

7. piemērs: Stils, balstoties uz bērnu elementu skaitu

Lai gan :has() tieši neskaita bērnu elementu skaitu, jūs varat to apvienot ar citiem selektoriem un CSS īpašībām, lai panāktu līdzīgus efektus. Piemēram, varat izmantot :only-child, lai stilizētu vecākelementu, ja tam ir tikai viens noteikta veida bērna elements.

div:has(> p:only-child) { background-color: lightgreen; }

Šis kods stilizēs <div> ar gaiši zaļu fona krāsu tikai tad, ja tas satur vienu <p> elementu kā savu tiešo bērnu.

Starppārlūku saderība un alternatīvas (Fallbacks)

Kopš 2023. gada beigām :has() selektoram ir lielisks atbalsts modernajās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr ir svarīgi pārbaudīt saderību Can I use vietnē pirms tā ieviešanas produkcijā, īpaši, ja nepieciešams atbalstīt vecākas pārlūkprogrammas.

Šeit ir saderības apsvērumu sadalījums:

• Modernās pārlūkprogrammas: Lielisks atbalsts jaunākajās Chrome, Firefox, Safari un Edge versijās.
• Vecākas pārlūkprogrammas: Nav atbalsta vecākās pārlūkprogrammās (piemēram, Internet Explorer).

Alternatīvu nodrošināšana

Ja nepieciešams atbalstīt vecākas pārlūkprogrammas, jums būs jānodrošina alternatīvas. Šeit ir dažas stratēģijas:

• JavaScript: Izmantojiet JavaScript, lai noteiktu pārlūkprogrammas atbalstu :has() un nepieciešamības gadījumā piemērotu alternatīvu stilu.
• Funkciju vaicājumi: Izmantojiet CSS funkciju vaicājumus (@supports), lai nodrošinātu dažādus stilus atkarībā no pārlūkprogrammas atbalsta.
• Progresīvā uzlabošana: Sāciet ar pamata, funkcionālu dizainu, kas darbojas visās pārlūkprogrammās, un pēc tam pakāpeniski uzlabojiet dizainu pārlūkprogrammām, kas atbalsta :has().

Šeit ir piemērs, kā izmantot funkciju vaicājumu:

.parent { /* Pamata stils visām pārlūkprogrammām */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* Uzlabots stils pārlūkprogrammām, kas atbalsta :has() */ border: 3px solid blue; } }

Šis kods piemēros melnu apmali .parent elementam visās pārlūkprogrammās. Pārlūkprogrammās, kas atbalsta :has(), tas piemēros zilu apmali, ja .parent elements satur attēlu.

Veiktspējas apsvērumi

Lai gan :has() piedāvā būtiskas priekšrocības, ir svarīgi ņemt vērā tā iespējamo ietekmi uz veiktspēju, īpaši, ja to izmanto plaši vai ar sarežģītiem selektoriem. Pārlūkprogrammām ir jāizvērtē selektors katram lapas elementam, kas var kļūt skaitļošanas ziņā dārgi.

Šeit ir daži padomi, kā optimizēt :has() veiktspēju:

• Saglabājiet selektorus vienkāršus: Izvairieties no pārlieku sarežģītu selektoru izmantošanas :has() pseidoklasē.
• Ierobežojiet darbības jomu: Piemērojiet :has() konkrētiem elementiem vai konteineriem, nevis globāli.
• Pārbaudiet veiktspēju: Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai uzraudzītu savu CSS noteikumu veiktspēju un identificētu iespējamās vājās vietas.

Biežākās kļūdas, no kurām izvairīties

Strādājot ar :has() selektoru, ir viegli pieļaut kļūdas, kas var radīt negaidītus rezultātus. Šeit ir dažas biežākās kļūdas, no kurām jāizvairās:

• Specifiskuma problēmas: Pārliecinieties, ka jūsu :has() noteikumiem ir pietiekams specifiskums, lai ignorētu citus CSS noteikumus. Izmantojiet tās pašas specifiskuma problēmu risināšanas metodes kā parasti.
• Nepareiza ligzdošana: Pārbaudiet elementu ligzdošanu, lai nodrošinātu, ka :has() selektors mērķē uz pareizo vecākelementu.
• Pārlieku sarežģīti selektori: Izvairieties no pārlieku sarežģītu selektoru izmantošanas :has() pseidoklasē, jo tas var ietekmēt veiktspēju.
• Pieņēmums par tiešajiem bērniem: Atcerieties, ka :has() pārbauda *jebkuru* pēcnācēju, nevis tikai tiešos bērnus. Izmantojiet tiešā bērna kombinatoru (>), ja nepieciešams mērķēt tikai uz tiešajiem bērniem (piemēram, div:has(> img)).

Labākā prakse :has() izmantošanai

Lai maksimāli izmantotu :has() selektora priekšrocības un izvairītos no iespējamām problēmām, ievērojiet šo labāko praksi:

• Izmantojiet to apdomīgi: Izmantojiet :has() tikai tad, ja tas sniedz skaidru priekšrocību salīdzinājumā ar citām CSS tehnikām vai JavaScript risinājumiem.
• Saglabājiet vienkāršību: Dodiet priekšroku vienkāršiem, salasāmiem selektoriem, nevis sarežģītiem un samudžinātiem.
• Rūpīgi pārbaudiet: Pārbaudiet savus CSS noteikumus dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu, ka tie darbojas kā paredzēts.
• Dokumentējiet savu kodu: Pievienojiet komentārus savam CSS kodam, lai paskaidrotu savu :has() noteikumu mērķi un funkcionalitāti.
• Apsveriet pieejamību: Pārliecinieties, ka jūsu :has() lietojums negatīvi neietekmē pieejamību. Piemēram, nepaļaujieties tikai uz stila izmaiņām, ko izraisa :has(), lai nodotu svarīgu informāciju; izmantojiet ARIA atribūtus vai alternatīvus mehānismus lietotājiem ar invaliditāti.

Reālās dzīves piemēri un lietošanas gadījumi

Apskatīsim dažus reālās dzīves piemērus, kā :has() selektoru var izmantot, lai risinātu izplatītas dizaina problēmas.

8. piemērs: Responsīvu navigācijas izvēlņu veidošana

Jūs varat izmantot :has(), lai izveidotu responsīvas navigācijas izvēlnes, kas pielāgojas dažādiem ekrāna izmēriem, pamatojoties uz konkrētu izvēlnes elementu klātbūtni.

Iedomājieties scenāriju, kurā vēlaties parādīt atšķirīgu navigācijas izvēlni atkarībā no tā, vai lietotājs ir pieteicies sistēmā. Ja viņš ir pieteicies, jūs varat rādīt profila un izrakstīšanās darbības, ja nē, jūs varat rādīt pieteikšanās/reģistrēšanās opcijas.

nav:has(.user-profile) { /* Stili pieteikušamies lietotājiem */ } nav:not(:has(.user-profile)) { /* Stili nepieteikušamies lietotājiem */ }

9. piemērs: Karšu komponenšu stils

:has() selektoru var izmantot, lai stilizētu karšu komponentes, pamatojoties uz to saturu. Piemēram, jūs varat pievienot ēnu kartei tikai tad, ja tā satur attēlu.

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

10. piemērs: Dinamisku tēmu ieviešana

Jūs varat izmantot :has(), lai ieviestu dinamiskas tēmas, pamatojoties uz lietotāja preferencēm vai sistēmas iestatījumiem. Piemēram, jūs varat mainīt lapas fona krāsu atkarībā no tā, vai lietotājs ir aktivizējis tumšo režīmu.

body:has(.dark-mode) { background-color: #333; color: #fff; }

Šie piemēri ilustrē :has() selektora daudzpusību un tā spēju risināt plašu dizaina problēmu klāstu.

CSS nākotne: Kas tālāk?

:has() selektora ieviešana iezīmē nozīmīgu soli uz priekšu CSS attīstībā. Tas dod izstrādātājiem iespēju veidot dinamiskākas, responsīvākas un vieglāk uzturamas stila lapas ar mazāku atkarību no JavaScript. Tā kā pārlūkprogrammu atbalsts :has() turpina pieaugt, mēs varam sagaidīt vēl inovatīvākus un radošākus šī spēcīgā selektora pielietojumus.

Raugoties nākotnē, CSS darba grupa pēta citas aizraujošas funkcijas un uzlabojumus, kas vēl vairāk paplašinās CSS iespējas. Tie ietver:

• Konteinera vaicājumi (Container Queries): Ļauj komponentēm pielāgot savu stilu, pamatojoties uz to konteinera, nevis skatloga izmēru.
• Kaskādes slāņi (Cascade Layers): Nodrošina lielāku kontroli pār CSS noteikumu kaskādi un specifiskumu.
• Progresīvāki selektori: Ievieš jaunus selektorus, kas var mērķēt uz elementiem, pamatojoties uz to atribūtiem, saturu un pozīciju dokumenta kokā.

Sekojot līdzi jaunākajiem CSS notikumiem un pieņemot jaunas funkcijas, piemēram, :has(), izstrādātāji var atraisīt pilnu CSS potenciālu un radīt patiesi izcilu tīmekļa pieredzi.

Noslēgums

:has() selektors ir spēcīgs papildinājums CSS rīkkopai, kas nodrošina vecākelementu atlasi un paver jaunas iespējas dinamiskam un responsīvam stilam. Lai gan ir svarīgi ņemt vērā pārlūkprogrammu saderību un veiktspējas ietekmi, :has() izmantošanas priekšrocības tīrākam, vieglāk uzturamam un veiktspējīgākam CSS kodam ir nenoliedzamas. Pieņemiet šo spēli mainošo selektoru un revolucionizējiet savu CSS stilu jau šodien!

Atcerieties ņemt vērā pieejamību un nodrošināt alternatīvus mehānismus vecākām pārlūkprogrammām. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat pilnībā izmantot :has() selektora potenciālu un radīt patiesi izcilu tīmekļa pieredzi lietotājiem visā pasaulē.